<template>
  <MyDialog :dialogForm="dialogForm" :dialogVisible="dialogVisible" @listenClose="onClose" @listenConfirm="onSubmit">
    <template #dialogBox>
      <MyForm :formData="formData" @listenClick="listenClick" :isClose="isClose" :isSubmit="isSubmit"
        :isDialogVisible="dialogVisible">
      </MyForm>
    </template>
  </MyDialog>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, getCurrentInstance, computed } from 'vue'
import { ParentForm } from '@/interface/index'
import MyDialog from '@/components/MyDialog.vue'
import { FunTime } from '@/global/methods'
import { ElMessage } from 'element-plus'
import { useStore } from '@/store'
import { updateUserAuthApi } from '@/views/account/api/accountApi'

const store = useStore()
const { proxy } = getCurrentInstance() as any;

const dialogVisible = ref<boolean>(false)//弹窗是否出现
const isClose = ref<boolean>(false)//弹窗点击关闭 触发表单取消校验提示 
const isSubmit = ref<boolean>(false)//弹窗点击确定 触发表单确定

const dialogForm = {
  width:'30%',
  title: '管理员权限'
}
interface PropsDialog {
  isShowDialog: boolean;//弹窗是否出现
  dialogData?: any
}
const props = withDefaults(defineProps<PropsDialog>(), {
  isShowDialog: false,
});
//封装的表单
const formData = reactive<ParentForm>({
  formItem: [
    { key: 'roleId', styleType: 'radio', value: '', placeholder: '请选择', data: [{ label: '镇管理员', value: 4 }, { label: '村管理员', value: 5 }] },
  ],
  rules: {
    roleId: [{ required: true, message: '请选择管理员权限', trigger: 'change' }],
  },
  size: 'large',//'large' | 'default' | 'small'
})
//监控弹窗是否出现
watch(
  () => props.isShowDialog,
  () => {
    dialogVisible.value = !dialogVisible.value
  }
)
//弹窗关闭事件
const onClose = () => {
  isClose.value = !isClose.value
  props.dialogData.administratorFlag=0
}
//弹窗确定事件
const onSubmit = () => {
  isSubmit.value = !isSubmit.value
}
//表单取消校验 关闭弹窗
const listenMyClose = () => {
  dialogVisible.value = !dialogVisible.value
}
//表单确定  调接口
const listenMySubmit = (formData: any) => {
  let obj = JSON.stringify(formData)
  let val = JSON.parse(obj)
  let params = val
  params.userId=props.dialogData.userId
  params.administratorFlag=1
  onAdd(params)
}
//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = { 'listenMyClose': listenMyClose, 'listenMySubmit': listenMySubmit }
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
  objFun[name](val)
}
//api
//提交接口any 写成对应的接口
const onAdd = async (params: any) => {
  try {
    let res = await updateUserAuthApi(params)
    if (res?.code === 0) {
      listenMyClose()//关闭弹窗
      store.commit('refresh/setRefresh', !store.getters['refresh/getRefresh'])//刷新表格
      ElMessage({ type: 'success', message: '启用成功' })
    }
    store.commit('loading/setLoad', false)
  } catch {
    store.commit('loading/setLoad', false)
  }
}
</script>
<style scoped lang='scss'>
</style>